<template>
    <div>
         <div class="herder">
            <div :class="key == item.id ? 'active' : ''" @click="okitem(item.id)" v-for="(item) in itemlist" :key="item.id" class="item">
                {{item.name}}
            </div>
         </div>
         <!-- //查看门店 -->
        <el-table
              :height="tableheight"
               ref="shopref"
              class="table-box"
              :data="shopdata"
              style="width: 100% ;margin-top:5px">
              <el-table-column
                prop="name"
                label="门店名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                width="180">
              </el-table-column>
              <el-table-column
                prop="user_name:"
                label="负责人">
              </el-table-column>
                 <el-table-column
                prop="mobile"
                label="电话">
              </el-table-column
              >
               <el-table-column
                prop="expire_time"
                label="有效期">
                <template  slot-scope="{row}">
                  {{ row.expire_time | capitalize}}
                </template>
              </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                 <template slot-scope="{row}">
                    <el-dropdown 
                    trigger="click"
                     slot="dropdown"
                    >
                     <span class="el-dropdown-link">
                        <span class="imghover"></span>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <div  @click="disposebtn(row)" class="itemcss">配置收款信息</div>
                       <div  @click="xuqibtn(row)" class="itemcss">续期</div>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </template>  
              </el-table-column>
        </el-table>
        <!-- 分页 -->
         <el-row type="flex" justify="end">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 300, 400]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="2">
               </el-pagination>
        </el-row>
         <!-- 配置收款配置 -->
        <el-dialog
          title="配置收款信息"
          :visible.sync="showshezhi"
          :show-close="false"
          :close-on-click-modal="false"
          width="25%"
          >
          <el-form  :model="makeform" label-width="80px">
            <el-form-item label="收款类型">
              <el-select  v-model="makeform.type" placeholder="请选择">
                 <el-option
                   label="直连商户支付"
                   :value='1'>
                 </el-option>
                 <el-option
                   label="服务厂商支付"
                   :value='2'>
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="商户ID">
              <el-input v-model="makeform.shop_id" ></el-input>
            </el-form-item>
             <el-form-item label="API秘籍">
               <el-input v-model="makeform.api_auth" ></el-input>
            </el-form-item>
                <el-form-item label="收款密匙">
                <el-input  
                v-model="makeform.api_cert"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                >
              </el-input>
            </el-form-item>
            <el-form-item label="收款证书">
              <el-input
                v-model="makeform.api_key"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                >
              </el-input>
            </el-form-item>
          </el-form>  
          <hr>
        <el-row type="flex" >
          <el-col :push="2" span:10>
              <el-button @click='showshezhi=false' style="width:80%"  :push='3' type="info" >取消</el-button>
          </el-col>
            <el-col :push="1" span:10>
              <el-button @click='okbtn' style="width:80%" class="addbtn" >确定</el-button>
          </el-col>
        </el-row>    
        </el-dialog>
        <!-- //续期 -->
        <el-dialog
          title="续期"
          :visible.sync="showtime"
          width="32%"
          @close="close"
          >
          <el-form :model="xuqifrom" label-width="80px">
            <el-form-item label="门店名称:">
              {{xuqifrom.title}}
            </el-form-item>
            <el-form-item label="门店有效期:">
               <el-date-picker
               v-model="xuqifrom.expire_time"
               type="datetime"
               placeholder="选择日期时间">
              </el-date-picker>
              —
              <el-date-picker
               @change="change"
               v-model="xuqifrom.xufeitime"
               type="datetime"
               placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="缴费金额:"
            >
                <el-input v-model="xuqifrom.price"></el-input>
            </el-form-item>
            <el-form-item label="缴费天数:">
               <el-input disabled v-model="xuqifrom.days"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
             <el-button @click=" detshoufei">取 消</el-button>
             <el-button type="primary" @click="btnshoufei">确 定</el-button>
          </span>  
        </el-dialog>
    </div>
</template>
<script>
 import { getshoplist,getshopzhifu,editzf,setxufei} from "@/api/menu/index.js"
export default {
    name:'mendian',
    props:['account_id'],
    data(){
        return {
            tableheight:0,
            makeform:{
              shop_id:'',//门店ID
              type:1,//支付类型
              service_mach_id:'',//商户ID号（服务商支付）
              mach_id:'',//商户ID号（服务商支付）
              api_auth:'',//API秘钥
              api_cert:'',//支付证书cert
              api_key:'',//支付证书key
            },
            xuqifrom:{
              expire_time:'',//机构有效期
              xufeitime:"",
              title:'',
              shop_id:'',//门店id
              days:'',//续费天数
              price:''//续费金额
            },
            showshezhi:false, //配置收款配置的弹窗
            showtime:false,
            shopdata:[],//门店的数据源
            shopfrom:{
            account_id:0,
            type:0,
            name:'',
            limit:10,
            page:0
            },//门店表单
            key:0,//默认选中全部门店
            itemlist:[{name:'全部门店',id:0},{name:'即将到期',id:1},
            {name:'已到期',id:2},{name:'已续费',id:3}
            ]
        }
    },
    methods:{
      change(){
         var a = new Date(this.xuqifrom.xufeitime)
         var c =  a.getTime() 
          var date = new Date(a)
          var n = date.getFullYear()
          var y = date.getMonth()+1
          var r = date.getDay()
          var xq = n+'-'+y+'-'+r
           var bb = this.capitalize(this.xuqifrom.expire_time)
            console.log(xq,bb);
           this.xuqifrom.days  =  this.getDateDiff(xq,bb)
            
      },
      // 每页显示的条数
      handleSizeChange(val){
         this.shopfrom.limit = val
        this.getlist()
      },
      //点击页码值触发
      handleCurrentChange(val){
        console.log(val);
        this.shopfrom.page = val
        this.getlist()
      },
        //获取门店的列表
       async getlist(){
            const data = await  getshoplist(this.shopfrom)
            if(data.code === 200) {
            this.shopdata = data.data.list
            console.log(data);
            }
         },
        //切换门店的选中状态
        okitem(val){
          if(val==0) {
            this.$parent.breadcrumbList = [{name:"机构管理"},{name:'查看门店'}]
            this.$parent.title = '全部门店'
          }else if (val == 1) {
            this.$parent.title = '即将到期'
          }else if(val == 2){
             this.$parent.title = '已到期'
          } else {
            this.$parent.title = '已续费'
          }
          this.key = val
          this.shopfrom.type = val
          this.getlist()
        },
        //点击收费配置信息触发
        disposebtn(row){
            this.showshezhi = true
             //获取支付信息
             getshopzhifu({shop_id:row.shop_id}).then(data=>{
                this.makeform ={...data.data.detail,shop_id:row.shop_id}
             })
        },
        //续期 
        async xuqibtn(val){
          this.xuqifrom.expire_time=val.expire_time
          this.showtime = true
          //续费商铺名
          this.xuqifrom.title = val.name
          // 续费商铺id
          this.xuqifrom.shop_id = val.shop_id
        },
        //确定续期
        async btnshoufei(){
         const data =  await setxufei( this.xuqifrom)
         if(data.code == 200){
           this.getlist()
          this.$message({
          showClose: true,
          message:data.msg,
          type: 'success'
         });
         }else {
          this.$message({
          showClose: true,
            message:data.msg,
          type: 'error'
        });

         }
          this.showtime=false
        },
        //关闭弹窗回调
        close(){
            this.xuqifrom ={
              expire_time:'',//机构有效期
              title:'',
              shop_id:'',//门店id
              days:'',//续费天数
              price:''//续费金额
            }
        },
        //取消续期
        detshoufei(){
            this.xuqifrom={
              title:'',
              shop_id:'',//门店id
              days:'',//续费天数
              price:'',//续费金额
              expire_time:''//机构有效期
            },
         this.showtime = false
        },
        async okbtn(){
          const data =  await  editzf(this.makeform)
        },
        getheight(){
           this.tableheight = window.innerHeight - 300
        },
         capitalize(val){
           var date = new Date(val*1000)
           var n = date.getFullYear()
           var y = date.getMonth()+1
           var r = date.getDay()
           return n+'-'+y+'-'+r
         },
         //计算天数
         getDateDiff(date1,date2){
         var sArr = date1.split("-");
         var eArr = date2.split("-");
         var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
         var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
         var result = (eRDate-sRDate)/(24*60*60*1000);
         return result ;
         }



     
  








    },
    watch:{
        account_id:{
            handler(val) {
                this.shopfrom.account_id = val
            },
            immediate: true
        }
    },
    filters: {
        capitalize: function(val){
            var date = new Date(val*1000)
            var n = date.getFullYear()
            var y = date.getMonth()+1
            var r = date.getDay()
            return n+'-'+y+'-'+r
        }
    },    
    mounted(){
      this.$nextTick(()=>{
        this.tableheight = window.innerHeight -300
      })
      window.addEventListener('resize',this.getheight)
      this.$parent.breadcrumbList = [{name:"机构管理"},{name:'查看门店'}]
      this.$parent.title = '全部门店'
      this.$parent.showtitle= true,
      this.getlist()
    },
    created(){


      // function getDateDiff(date1,date2){
      //    var sArr = date1.split("-");
      //    var eArr = date2.split("-");
      //    var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
      //    var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
      //    var result = (eRDate-sRDate)/(24*60*60*1000);
      //    return result ;
      //    }
      //   var a = getDateDiff("2021-10-25","2021-11-28")
      //   console.log(a);



    }
} 
</script>
<style lang="less" scoped>
 .herder {
     display: flex;
     & .item:nth-last-of-type(2) {
          border-left: 0;
     }
     & .item:nth-last-of-type(1) {
          border-left: 0;
     }
       & .item:nth-last-of-type(3) {
          border-left: 0;
     }
     .item {
         border: 1px solid #CCCCCC;
         width: 100px;
         height: 40px;
         line-height: 40px;
         text-align: center;
     }
     .active {
         background-color: #09A58B;
         color: #FFFFFF;
     } 
     
 }
   .itemcss {
         text-align: center;
         padding: 10px;
          &:hover{color: #09A58B!important;}
     }

    hr {
    opacity: 0.5;
    width: 108%;
    margin-top: 50px;
    margin-left: -4%;
    margin-bottom: 15px;
    color: #999;
  }   
</style>